import React from 'react';
import {HomeLeftContainer} from './style';
import { Link } from 'react-router-dom';
import {Menu} from 'antd';
import {
    CompassOutlined,
    WechatOutlined,
    AntDesignOutlined
} from '@ant-design/icons';

const {SubMenu} = Menu;

function HomeLeft() {

    return (
        <HomeLeftContainer>
            <div className='logoBox'>
                <div className="logo">
                    <div>
                        <img src="/assets/logo-ant.svg" alt=""/>
                    </div>
                    <div className='logoName'>
                        Pro
                    </div>
                </div>
            </div>
            <Menu

                defaultSelectedKeys={['0']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                style={{fontSize: 16}}
            >
                <Menu.Item
                    key='WeChat'
                    icon={<WechatOutlined  style={{fontSize: 18}} />}
                >
                    <Link to='/wechat'>
                        WeChat
                    </Link>
                </Menu.Item>

                <SubMenu
                    key="Cell Features"
                    icon={<CompassOutlined />}
                    title='Cell Features'
                >
                        <Menu.Item key="Conference">
                            <Link to='/conference'>
                                Conference
                            </Link>
                        </Menu.Item>
                </SubMenu>
                <Menu.Item
                    key='ExerciseList'
                    icon={<AntDesignOutlined />}
                >
                    <Link to='/exerciselist'>
                        ExerciseList
                    </Link>
                </Menu.Item>
            </Menu>
        </HomeLeftContainer>

    )
}

export default React.memo(HomeLeft)